<template>
  <div>
    <div class="mytag">
      <!-- 使用textarea,更好的修改文章，提高美观度 -->
      <textarea
        ref="inputRef"
        @blur="isEdit = false"
        v-if="isEdit"
        placeholder="请输入"
        :value="value"
        @keyup.enter="handleEnter"
      ></textarea>

      <!--   v-if="isEdit"声明一个isEdit 变量，默认为false,当点击时，设置为true,即显示文本域， 失去焦点时，显示text文本-->
      <!--   :value="value"  textarea里面的数据和父组件传来的value做绑定
      当监听到回车事件时，执行handleEnter方法   
      -->
      <div v-else @click="handerClick" class="text">{{ value || ' ' }}</div>
      <!-- 添加一个空字符串，使得为空时也可以添加或者修改 -->
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { defineProps, defineEmits } from 'vue'

const isEdit = ref(false)
const inputRef = ref(null)

const handerClick = () => {
  isEdit.value = true

  // nextTick(() => {
  //   inputRef.value.focus()
  // })
}

// 接受父组件传来的数据 value 和 itemId
const props = defineProps({
  value: [String, Number],
  itemId: [String, Number]
})
const emit = defineEmits(['input'])

// 子传父，回车时将数据提交给父组件
const handleEnter = (e) => {
  console.log(e.target.value, props.itemId)
  emit('input', e.target.value, props.itemId)
  isEdit.value = false
}

// 调整 textarea 的高度以适应内容
</script>

<style scoped>
/* textarea {
  width: 100%;
  height: auto;
  border: 0;
  box-sizing: border-box; 
  resize: none; 
}
.text {
  cursor: pointer;
} */

textarea {
  height: 300px !important; /* 默认高度 */
  border: 0;
  box-sizing: border-box; /* 确保宽度计算包含内容 */

  overflow-y: auto; /* 超出内容时显示滚动条 */
}

.text {
  height: 300px; /* 默认高度 */
  cursor: pointer;
  overflow-y: auto; /* 超出内容时显示滚动条 */
}
</style>
